<template>
  <div class="info">
    <div class="title">基础信息</div>
    <div class="content">
      <div class="txtList">客户名称：{{info.clientName}}</div> 
      <!-- {{info.}} -->
      <div class="txtList">行业类型：{{info.industryType}}</div> 
 
      <div class="txtList">客户类型：{{info.clientType}}</div> 
      <div class="txtList">客户渠道：{{info.source}}</div> 

     
      <div class="txtList">客户地址：{{info.area}}</div>
      <div class="txtList">详细地址：{{info.address}}</div>
      <div class="txtList">门店数量：{{info.shopNum}}</div>
      <!-- <div class="txtList">客户述求：{{info.clientAppeal}}</div>
      <div class="txtList">抖音来客账号：{{info.tiktokVisitorAccount}}</div> -->
      <div class="txtList">客户对接人：{{info.contactPerson}}</div>
      <div class="txtList">联系方式：{{info.phone}}</div>
      <div class="txtList">抖音林客账号：{{info.tiktokLinkeStatus}}
        <el-button type="primary" size="mini" @click="editStatus" style="margin-left: 18px" v-if="info.tiktokLinkeStatus !== '-' && pathType == 'index'">修改</el-button>
      </div>
      <div class="txtList remark">客户备注：{{info.remark}}</div>
    </div>
    <div class="title">服务信息</div>
    <div class="content">
      <div class="txtList">签约时间：{{info.signTime}}</div>
      <div class="txtList">服务时间：{{info.serviceTime}}</div>
      <div class="txtList">服务类型：{{info.serviceType}}</div>
      <div class="txtList">服务佣金：{{info.serviceCommission}}</div>
      <div class="txtList">合同期直播场次：{{info.liveNum}}</div>
      <div class="txtList">合同期短视频条数：{{info.shortVideoNum}}</div>
      <div class="txtList">运营负责人：{{info.operationManager}}</div>
      <div class="txtList">客户负责人：{{info.responsiblePerson}}</div>
      <div class="txtList">专场直播场数：{{info.specialLiveNum}}</div>
      <div class="txtList">串场直播场数：{{info.guestLiveNum}}</div>
      <div class="txtList">达人探店条数：{{info.talentShortVideoNum}}</div>
      <div class="txtList">云剪辑条数：{{info.cloudShortVideoNum}}</div>
      <div class="txtList">视频宣传拍摄条数：{{info.publicizeShortVideoNum}}</div>
      <div class="txtList">前置费：{{info.frontMoney}}</div>
      <div class="txtList">前置费收取时间：{{info.frontMoneyTime}}</div>
    </div>
    <div class="title">系统信息</div>
    <div class="content">
      <div class="txtList">创建时间：{{info.createTime}}</div>
      <div class="txtList">最后更新时间：{{info.updateTime}}</div>
    </div>
    <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="dialogVisible" width="600px">
      <p>是否将抖音林客绑定状态修改为:</p>
      <el-select v-model="tiktokLinkeStatus" placeholder="请选择" style="width: 500px;margin-top: 20px;">
        <el-option v-for="item in optionsStatus" :key="item.id" :label="item.value" :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editStatusClick" :loading="statusLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
          
<script>
import Loading from "@/components/Loading/index";
// api
import {

  clientInfo,
  editlinke,
} from "@/api/customer/customerFile";

export default {
  name: "detail",
  components: {},
  data() {
    return {
      id: '',
      info: {},
      industryList: [],
      clientList: [],
      sourceList: [],
      appealListArray:[],
      appealTxt: '',
      pathType: '',
      dialogVisible: false,
      optionsStatus:[],//抖音林客绑定状态数组
      tiktokLinkeStatus:'',//抖音林客账号状态 1 未绑定 2 手工绑定 3 接口绑定
      statusLoading: false,
    };
  },
  computed: {},
  created() {
    this.id = this.$route.query.id;
		this.pathType = this.$route.query.pathType

    this.getDict() 
    this.getDetail()
  },
  methods: {
  //获取状态字典
    getDict() {
      var dictType = "bee_client_industry_type,bee_client_type,bee_client_service_type,bee_client_source,bee_client_filing_appeal,bee_client_tiktok_linke_status";
      this.$getSelectList(dictType)
        .then((res) => {
          this.industryList = res.result[0].dictList
          this.clientList = res.result[1].dictList
          this.serviceList = res.result[2].dictList
          this.sourceList = res.result[3].dictList
          this.appealListArray = res.result[4].dictList
          this.optionsStatus = res.result[5].dictList
        })
        .finally(() => {
          this.loading = false;
        });
        console.log('this.industryList',this.industryList)
    },
    
    //获取详情
    getDetail(){
      var id = this.id
      clientInfo(id).then(res => {
        
        var data = res.result
        this.info = data
        Object.keys(this.info).forEach(key => {
          if (this.info[key] === '') {
            this.info[key] = '-'
          }
        })
      })
    },
    //修改状态
    editStatus() {
      this.tiktokLinkeStatus = this.info.tiktokLinkeStatusValue
      this.dialogVisible = true
      return
      var id = this.id
      var tiktokLinkeStatus = this.info.tiktokLinkeStatus
      if(tiktokLinkeStatus == '未绑定'){
        var title = '是否将抖音林客绑定状态修改为：已绑定'
      }else if(tiktokLinkeStatus == '已绑定'){
        var title = '是否将抖音林客绑定状态修改为：未绑定'
      }
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        editlinke(id).then(res => {
          this.getDetail()

          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    //修改状态确认
    editStatusClick(){
      this.statusLoading = true
      let data = {
        clientId: this.id,
        tiktokLinkeStatus: this.tiktokLinkeStatus
      }
      editlinke(data).then(res => {
        this.getDetail()
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
        this.dialogVisible = false
        setTimeout(()=>{
          this.statusLoading = false
        },1000)
      }).catch(()=>{
        this.statusLoading = false
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.info{
  .title{
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom: 14px;
    margin-top: 20px;
  }
  
}
.content{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .txtList{
      width: 33%;
      font-size: 14px;
      color: #333;
      padding: 10px 0;
      display: flex;
      justify-content: flex;
      align-items: center;
    }
    .remark{
      display: flex;
      flex-wrap: wrap;
    }
    .listTxt{
      width: 33%;
      display: flex;
      justify-content: flex-start;
      height: 50px;
      align-items: center;
      font-size: 14px;
      color: #333;
      .left{
        width: 100px;
      }
    }
  }
</style>
          